﻿<script>
    $(function() {
        // Note: This will execute as soon as the main page is loaded.
    });

    function appInitialize(id) {

        // Clear the <ul> elements
        $("#appTasks").empty();
        $("#appGroups").empty();

        $.post('/Home/GetAppById',
            { appId: id },
            OnAppRetrieved);
    }

    function OnAppRetrieved(app) {
        $('#prestoSelection').text(app.Name);  // Show the name of the app in the header
        $('#txtAppName').val(app.Name);
        $('#txtAppVersion').val(app.Version);
        $('#txtAppForce').val(app.NameForceInstallation);

        displayTasks(app);
        displayVariableGroups(app);
    }

    function displayTasks(app) {
        // Add the tasks to the task listview.
        // First, sort the tasks by the Sequence property.
        var tasks = app.Tasks;
        tasks.sort(SortBySequence);

        // Now add the tasks to an array...
        // This approach from: http://stackoverflow.com/a/19083625/279516
        var items = $.map(tasks, function (task) {
            return $('<li>').append(
                $('<a>', {
                    href: '#',
                    text: task.Description,
                    click: function (e) {
                        e.preventDefault();
                        window.showTask(app, task);
                    }
                })
            );
        });

        // ... and apply all of the tasks at one time.
        $('#appTasks').append(items); //.listview('refresh');  // Need to refresh to get the new items to use the jQuery Mobile formatting

        // Note: This is what was done when using a jQuery Mobile listview:
        // $('#appTasks').append(items).listview('refresh');  // Need to refresh to get the new items to use the jQuery Mobile formatting
    }

    function displayVariableGroups(app) {
        var groups = app.CustomVariableGroups;
        groups.sort(SortyByName);

        var items = [];
        $.each(groups, function(index, group) {
            items.push('<li><a href="#">' + group.Name + '</a></li>');
        });

        $('#appGroups').append(items).listview('refresh');
    }

    function SortBySequence(a, b) {
        var aSequence = a.Sequence;
        var bSequence = b.Sequence;
        return ((aSequence < bSequence) ? -1 : ((aSequence > bSequence) ? 1 : 0));
    }

    function SortyByName(a, b) {
        var aName = a.Name;
        var bName = b.Name;
        return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
    }
</script>

<form>
    <div data-role="fieldcontain">
         <label for="txtAppName">Name:</label>
         <input type="text" data-mini="true" name="text-14" id="txtAppName" value="">
    </div>
    <div data-role="fieldcontain">
         <label for="txtAppVersion">Version</label>
         <input type="text" data-clear-btn="true" data-mini="true" name="text-15" id="txtAppVersion" value="">
    </div>
    <div data-role="fieldcontain">
        <label for="txtAppForce">Force:</label>
        <input type="text" data-mini="true" name="text-14" id="txtAppForce" value="">
    </div>
    
    <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
        <div data-role="collapsible">
            <h3>Tasks</h3>
            <ul id="appTasks" data-role="listview" data-inset="true" />
        </div>
        <div data-role="collapsible">
            <h3>Variable Groups</h3>
            <ul id="appGroups" data-role="listview" data-inset="true" />
        </div>
    </div>
</form>